<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="grid-demo" style="background-color: chartreuse">内部列</div>
        </div>
        <div class="layui-col-md5" style="background-color: chocolate">
            <div class="layui-carousel" id="test10">
                <div carousel-item="">
                    <div><img width="-1%" height="-1%" src="img/1547132399386.jpeg"></div>
                    <div><img width="-1%" height="-1%" src="img/1547197565728.jpeg"></div>
                    <div><img width="-1%" height="-1%" src="img/1547197575483.jpeg"></div>
                    <div><img width="-1%" height="-1%" src="img/1547198187692.jpeg"></div>
                    <div><img width="-1%" height="-1%" src="img/1547198219157.jpeg"></div>
                    <div><img width="-1%" height="-1%" src="img/1547198219157.jpeg"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md7" style="background-color: crimson;">

            <h3 class="" id="goods_name">商品名称</h3>
            <p class="">价格: ￥<sapn id="goods_price"> 188.00 </sapn></p>
            <p class="">库存: <sapn id="goods_num"> 4 </sapn></p>
            <input type="hidden" value="" id="goods_id">
            <input type="hidden" value="" id="product_id">

            <form class="layui-form" action="">
                <table class="layui-table" lay-even="" lay-skin="row" id="goods_product">
                </table>
                

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input class="layui-btn layui-btn-primary buy_num" type="button" value="+">
                        <input class="layui-btn layui-btn-primary buy_num" type="text" value="1" id="buy_num">
                        <input class="layui-btn layui-btn-primary buy_num" type="button" value="-">
                        <input class="layui-btn" type="button" value="加入购物车" id="add_car" >
                        <input class="layui-btn" type="button" value="立即购买">
                    </div>
                </div>
            </form>

            

        </div>
    </div>


    <script src="./layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['carousel', 'form', 'jquery'], function () {
            var carousel = layui.carousel
            var form = layui.form
            var $ = layui.$

            //图片轮播
            carousel.render({
                elem: '#test10'
                , width: '593px'
                , height: '440px'
                , interval: 1500
            });

            var goods_id = getUrlParam('goodsId' )
            var type_id = getUrlParam('typeId' )

            // 获取商品的信息
            $.ajax({
                method: 'get',
                url: 'http://localhost/first/php/public/index.php/index/Goods/getOne',
                dataType: 'json',
                data: {
                    goods_id: goods_id
                },
                success: function (res) {
                    if( res.code == 0 )
                    {
                        $('#goods_name').html( res.data.goods_name )
                        $('#goods_price').html( res.data.goods_price )
                        $('#goods_num').html( res.data.goods_num )

                        $('#goods_id').val( res.data.goods_id )
                    }
                }
            })

            // 获取对应的属性以及属性值
            $.ajax({
                method: 'get',
                url: 'http://localhost/first/php/public/index.php/index/Goods/getAttrValue',
                dataType: 'json',
                data: {
                    goodsId: goods_id,
                    typeId: type_id
                },
                success: function (res) {
                    if( res.code == 0 )
                    {
                        var str = ''
                        $( res.data.attr ).each( function( k,v){
                            str += '<tr><td>'+v.attr_name+'</td><td>'
                                $( res.data.attr_value ).each( function( ck,cv ){
                                    if( cv.attr_id == v.attr_id )
                                    {
                                        str += '<input type="radio" lay-filter="attr_value" class="attr_value" name="attr_value_'+v.attr_id+'" value="'+cv.attr_value_id +'" title="'+ cv.attr_value_name +'" checked="">'
                                    }
                                })
                            str += '</td></tr>'
                        })
                        $('#goods_product').html( str )
                        form.render()
                        getProduct()
                    }
                }
            })

            // 根据选择的不同的组合、获取对应的价格、以及库存
            form.on('radio(attr_value)', function (data) {
                getProduct()
                return false;
            });


            function getProduct()
            {
                var attr_value = $('.attr_value:checked')
                var arr_id = []
                $(attr_value).each(function (k, v) {
                    arr_id[k] = $(v).val()
                })
                str_id = arr_id.join(',')
                $.ajax({
                    method: 'get',
                    url: 'http://localhost/first/php/public/index.php/index/Product/getOne',
                    dataType: 'json',
                    data: {
                        ids: str_id
                    },
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg)
                        }

                        if (res.code == 0) {
                            $('#goods_price').html(res.data.product_price)
                            $('#goods_num').html(res.data.product_num)
                            $('#product_id').val( res.data.product_id)
                        }
                    }
                })
            }

            // 加入购物车
            $(document).on( 'click', '#add_car', function(){
                var goods_id = $('#goods_id').val()
                var product_id = $('#product_id').val()
                var product_price = $('#goods_price').text()
                var product_num = $('#buy_num').val()

                console.log(goods_id)
                console.log(product_id)
                console.log(product_price)
                console.log( product_num )

            })

        });


        function getUrlParam(param) {
                var url = location.href
                // http://localhost/first/web/admin_layui/goods_product_add.html?goodsId=2&typeId=2
                var url_arr = url.split('?')
                var param_arr = url_arr[1].split('&')
                for (let i = 0; i < param_arr.length; i++) {
                    var p = param_arr[i].split('=')
                    if (param == p[0]) {
                        return p[1];
                    }
                }
            }
    </script>



</body>

</html>